/**
 * @name:      SASS常用Function与Mixins
 * @update:    2015-01-09 16:18:05
 * @copyright: MIT License
*/

/* ==========================================================================
   SASS function
   ========================================================================== */
   
/*
 * @name:  px转em
 * @param: $px {string}  对齐类型
 * @param: $base-font-size {dimension}  基准字号大小
 */
@function px2em($px, $base-font-size: 16px) {
    @if (unitless($px)) {
        @warn "Assuming #{$px} to be in pixels, attempting to convert it into pixels for you";
        @return px2em($px + 0px); // That may fail.
    } @else if (unit($px) == em) {
        @return $px;
    }
    @return ($px / $base-font-size) * 1em;
}

/*
 * @name:  半透明颜色
 * @param: $opacity {number}  透明度值
 */
@function black($opacity){
    @return rgba(0,0,0,$opacity);
}
@function white($opacity){
    @return rgba(255,255,255,$opacity);
}


/* ==========================================================================
   SASS mixins
   ========================================================================== */

/*
 * @name:    BEM模块
 * @param:   $elementSeparator {string}  BE连接符
 * @param:   $modifierSeparator {string}  M连接符
 * @param:   $selector {string}  类名
 * @thanks:  https://medium.com/@marcmintel/pushing-bem-to-the-next-level-with-sass-3-4-5239d2371321 by @Marcmintel(https://twitter.com/marcmintel)
 * @expamle:  
    ============= user =============
    @include b(block) {
        background: red;
        @include e(header){
            font-size: 14px;
            @include m(css) {
                font-size: 18px;
            }
        };
        @include m(book) {
            color: blue;
            @include e(kindlebook) {
                background: gray;
            }
        }
    }
    ============= output =============
    .block {
        background: red;
    }
    .block__header {
        font-size: 14px;
    }
    .block__header--css {
        font-size: 18px;
    }
    .block--book {
        color: blue;
    }
    .block--book .block__kindlebook {
        background: gray;
    }
 */

// $elementSeparator: '__';
// $modifierSeparator: '--';
// @function containsModifier($selector) {
//     $selector: selectorToString($selector);
//     @if str-index($selector, $modifierSeparator) {
//         @return true;
//     } @else {
//         @return false;
//     }
// }
// @function selectorToString($selector) {
//     $selector: inspect($selector); //cast to string
//     $selector: str-slice($selector, 2, -2); //remove brackets
//     @return $selector;
// }
// @function getBlock($selector) {
//     $selector: selectorToString($selector);
//     $modifierStart: str-index($selector, $modifierSeparator) - 1;
//     @return str-slice($selector, 0, $modifierStart);
// }
// @mixin b($block) {
//     .#{$block} {
//         @content;
//     }
// }
// @mixin e($element) {
//     $selector: &;
//     @if containsModifier($selector) {
//         $block: getBlock($selector);
//         @at-root {
//             #{$selector} {
//                 #{$block+$elementSeparator+$element} {
//                     @content;
//                 }
//             }
//         }
//     } @else {
//         @at-root {
//             #{$selector+$elementSeparator+$element} {
//                 @content;
//             }
//         }
//     }
// }
// @mixin m($modifier) {
//     @at-root {
//         #{&}#{$modifierSeparator+$modifier} {
//             @content;
//         }
//     }
// }
   
/* @name: 重置 */
@mixin reset{
    margin: 0;
    padding: 0;
}

/*
 * @name:  inline-block
 * @param: $alignment {string}  对齐类型
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin inline-block($alignment: middle,$support-for-ie:true) {
    display: inline-block;
    @if $alignment and $alignment != none {
        vertical-align: $alignment;
    }
    @if $support-for-ie {
        *vertical-align: auto;
        *display: inline;
        zoom: 1;
    }
}

/* @name: 闭合浮动 */
@mixin clearfix{
    *zoom: 1;
    &:before,
    &:after{
        content: "";
        display: table;
        line-height: 0;
    }
    &:after{
        clear: both;
    }
}

/*
 * @name:  浮动
 * @param: $side {string}  浮动方向
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin float($side: left,$support-for-ie:true){
    float: unquote($side);
    @if $support-for-ie{
        _display: inline;
    }
}

/*
 * @name:  文本隐藏 (text-indent: -9999px;有性能问题)
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin hide-text($support-for-ie:true){
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    @if $support-for-ie{
        *text-indent: -9999px;
        *text-align: left;
    }
}

/*
 * @name:  隐藏增加可访问性的文字，注意与hide-text的区别是，他隐藏整个元素
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin invisible($support-for-ie:true) {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    @if $support-for-ie{
        *clip: rect(1px 1px 1px 1px);
    }
}

/*
 * @name:  图片代替文字
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin img-replace($support-for-ie: true) {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    @if $support-for-ie {
        *text-indent: -9999px;
        *text-align: left;
    }
    &:before {
        content: "";
        display: block;
        width: 0;
        height: 150%;
    }
}

/*
 * @name:  文字溢出显示省略号
 * @param: $width {dimension}  指定宽度 (需带单位)
 */
@mixin ellipsis($width: auto) {
    @if($width) {
        width: $width;
    }
    white-space: nowrap;
    word-wrap: normal;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow: ellipsis;
    text-align: left;
}

/*
 * @name: 强制不换行
 * @link: http://www.hicss.net/solve-change-line-in-css
 */
@mixin nowrap {
    white-space: nowrap;
    word-wrap: normal;
    word-break: keep-all;
}

/* @name: 连续字符换行 */
@mixin break {
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
}

/* @name: 阻止长字符串（例如url或无意义连续英文字符）打破布局 */
@mixin pre { 
    white-space: pre;           // CSS 2.0
    white-space: pre-wrap;      // CSS 2.1
    white-space: pre-line;      // CSS 3.0
    white-space: -pre-wrap;     // Opera 4-6
    white-space: -o-pre-wrap;   // Opera 7
    white-space: -moz-pre-wrap; // Mozilla
    white-space: -hp-pre-wrap;  // HP Printers
    word-wrap: break-word;      // IE 5+
}

/*
 * @name:  resizable
 * @param: $direction {string}  缩放的方向 (horizontal || vertical || both)
 * @link:  https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/mixins/_resize.scss
 * @1:     Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
 */
@mixin resizable($direction) {
    resize: $direction;
    overflow: auto; /* 1 */
}

/*
 * @name:  最小高度
 * @param: $height {dimension}  最小高度
 */
@mixin min-height($height) {
    min-height: $height;
    height: auto !important;
    _height: $height;
}

/*
 * @name:  背景透明
 * @param: $color {color}  颜色  
 * @param: $opacity {number}  透明度
 * @param: $support-for-ie {boolean}  是否支持IE6
 * @link:  https://github.com/airen/Sass_mixins_function/tree/master/mixins
 */
@mixin transparent($color,$opacity,$support-for-ie:true){
    background-color: transparent;
    background-color: rgba($color,$opacity);
    @if $support-for-ie{
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#{ie-hex-str(rgba($color,$opacity))},endColorstr=#{ie-hex-str(rgba($color,$opacity))});
        zoom: 1;
        :root & {
            filter: none;
        }
    }
}

/*
 * @name:  透明度
 * @param: $opacity {number}  透明度
 * @param: $support-for-ie {boolean}  是否支持IE6
 */
@mixin opacity($opacity:.65,$support-for-ie:true) {
    opacity: $opacity;
    @if $support-for-ie{
        $opacity-ie: $opacity * 100;
        filter: alpha(opacity=$opacity-ie); //IE8
    }
}

/* @name: 重置滤镜 */
@mixin reset-filter {
    filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}

/*
 * @name:  液态比例缩放
 * @param: $large-size {dimension}  背景图片大尺寸
 * @param: $small-size {dimension}  背景图片小尺寸
 * @link:  http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
 */
@mixin fluid-ratio($large-size,$small-size) {
    $width-large: nth($large-size,1); //背景图片大尺寸的宽度
    $width-small: nth($small-size,1); //背景图片小尺寸的宽度
    $height-large: nth($large-size,2); //背景图片大尺寸的高度
    $height-small: nth($small-size,2); //背景图片小尺寸的高度
    //计算slope => slope = (h2 - h1) / (w2 - w1)
    //h1:背景图片大尺寸的高度　=> $height-large
    //w1:背景图片大尺寸的宽度  => $width-large
    //h2:背景图片小尺寸的高度　=> $height-small
    //w2:背景图片小尺寸的宽度　=> $width-small
    $slope: ($height-large - $height-small) / ($width-large - $width-small);
    //计算元素的初始高度start Height => Start height = h1 - w1 * slope
    $start-height: $height-small - $width-small * $slope;

    padding-top: $slope * 100%; //你也可以将padding-top换成padding-bottom
    height: $start-height;
    background-size: cover;
    background-position: center;
}


/*
 * @name:  border三角形
 * @param: $base {dimension}  底边尺寸
 * @param: $height {dimension}  高度
 * @param: $color {color}  颜色
 * @param: $direction {string}  方向 (top || bottom || left || right)
 * @link:  http://codepen.io/zhouwenbin/pen/emZVZp
 */
@mixin triangle($base,$height,$color,$direction){
    font-size: 0;
    width: 0;
    height: 0;
    line-height: 0;
    overflow: hidden;
    display: inline-block;
    *display:inline;
    *zoom:1;
    vertical-align: -2px;
    border-style: dashed;
    
    @if($direction == top){
        border-width: $height $base / 2 ;
        border-color:transparent transparent $color transparent;
        margin-top:-$height;
    }
    @if($direction == bottom){
        border-width: $height $base / 2 ;
        border-color: $color transparent transparent transparent;
        margin-bottom:-$height;
    }
    @if($direction == left){
        border-width: $base / 2 $height ;
        border-color:transparent transparent transparent $color;
        margin-right:-$height;
    }
    @if($direction == right){
        border-width: $base / 2 $height ;
        border-color:transparent $color transparent transparent;
        margin-left:-$height;
    }
}



/* ==========================================================================
   媒体查询@Media Queries
   ========================================================================== */
/*
 * @name:       媒体查询
 * @thanks:     http://paranoida.com/　by @Rafal Bromirski (http://twitter.com/paranoida)
 * @resolution: http://screensiz.es/tablet
 * @link:       http://www.stephen.io/mediaqueries/
 */
 
/* ========= Screen ========= */

//@media screen and (min-width ...) and (max-width ...){...}
@mixin screen($resMin, $resMax){
    @media screen and (min-width: $resMin) and (max-width: $resMax){
        @content;
    }
}
//@media screen and (max-width ...){...}
@mixin max-screen($res){
    @media screen and (max-width: $res){
        @content;
    }
}

//@media screen and (min-width ...){...}
@mixin min-screen($res){
    @media screen and (min-width: $res){
        @content;
    }
}
//@media screen and (min-height ...) and (max-height ...){...}
@mixin screen-height($resMin, $resMax){
    @media screen and (min-height: $resMin) and (max-height: $resMax){
        @content;
    }
}
//@media screen and (max-height ...){...}
@mixin max-screen-height($res){
    @media screen and (max-height: $res){
        @content;
    }
}
//@media screen and (min-height ...){...}
@mixin min-screen-height($res){
    @media screen and (min-height: $res){
        @content;
    }
}


/* ========= hdpi ========= */
// Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
// HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)

@mixin hidpi($ratio: 1.3){
    @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
    only screen and (min--moz-device-pixel-ratio: $ratio),
    only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
    only screen and (min-resolution: #{round($ratio*96)}dpi),
    only screen and (min-resolution: #{$ratio}dppx){
        @content;
    }
}

@mixin retina-image($filename, $background-size, $ratio:1.3,$extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: false) {
    @if $asset-pipeline {
        background-image: image-url("#{$filename}.#{$extension}");
    } @else {
        background-image: url("#{$filename}.#{$extension}");
    }

  @include hidpi($ratio) {
    @if $asset-pipeline {
        @if $retina-filename {
            background-image: image-url("#{$retina-filename}.#{$extension}");
        } @else {
            background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
        }
    }
    @else {
        @if $retina-filename {
            background-image: url("#{$retina-filename}.#{$extension}");
        } @else {
            background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
        }
    }
    background-size: $background-size;
  }
}


/* ========= iPhone5 ========= */
@mixin iphone5($orientation: all){
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 568px;
    $devicePixelRatio: 2;
    $deviceAspectRatio: '40/71';

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio) and (orientation:#{$orientation}){
            @content;
        }
    }
}


/* ========= iPhone4 ========= */
@mixin iphone4($orientation: all){
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 480px;
    $devicePixelRatio: 2;
    $deviceAspectRatio: '2/3';

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: $deviceAspectRatio){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (device-aspect-ratio: 2/3) and (orientation:#{$orientation}){
            @content;
        }
    }
}


/* ========= iPhone3 ========= */
@mixin iphone3($orientation: all){
    $deviceMinWidth: 320px;
    $deviceMaxWidth: 480px;
    $devicePixelRatio: 1;

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}){
            @content;
        }
    }
}


/* ========= iPad All ========= */
@mixin ipad($orientation: all){
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1024px;

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (orientation:#{$orientation}){
            @content;
        }
    }
}


/* ========= iPad Mini ========= */
@mixin ipad-mini($orientation: all){
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1024px;
    $devicePixelRatio: 1;

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-min-device-pixel-ratio: $devicePixelRatio){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-min-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}){
            @content;
        }
    }
}


/* ========= iPad Retina ========= */
@mixin ipad-retina($orientation: all){
    $deviceMinWidth: 768px;
    $deviceMaxWidth: 1024px;
    $devicePixelRatio: 2;

    @if $orientation == all{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-min-device-pixel-ratio: $devicePixelRatio){
            @content;
        }
    }
    @else{
        @media only screen and (min-device-width: $deviceMinWidth) and (max-device-width: $deviceMaxWidth)
        and (-webkit-min-device-pixel-ratio: $devicePixelRatio) and (orientation:#{$orientation}){
            @content;
        }
    }
}

